<template>
	<view class="lh-container">
		<view class="top_image">
			<image :src="imagePath + 'ljj.png'" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<view class="" style="margin-bottom: 50rpx">
			<left></left>
		</view>
		<view class="form-container">
			<uni-forms class="forms-item" ref="accountForm" :model="formData">
				<view class="login-btn" style="text-align: center" v-if="userInfo.info.mobile">
					<image :src="imagePath + 'btn.png'" mode="widthFix" style="width: 600rpx" @click="submitform"></image>
				</view>
				<view class="login-btn-auth" v-else>
					<!-- 支付宝 -->
					<button class="sub-btn" style="height: 150rpx" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumberConfirm" @error="handleAuthError">
						<image :src="imagePath + 'btn.png'" mode="widthFix" style="width: 600rpx"></image>
					</button>
				</view>

				<view style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; justify-content: center; align-items: center; font-size: 24rpx">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #ffffff; font-weight: 400; font-size: 26rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #f8ffa9" @click="privatePro(1)">《个人信息授权及保护声明》</text>
					<text style="color: #f8ffa9" @click="privatePro(2524)">《产品说明》</text>
				</view>
			</uni-forms>
		</view>
		<view class="bottom">
			<view class="">业务资费：首周免费，续订30元/月（随时取消）</view>
			<view class="">续订权益：学王课堂会员月卡，30元支付宝立减金</view>
			<view class="">客服热线：400-8825-101</view>
		</view>

		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>

		<view class="fixed-1" @click="privatePro(2524)">
			<image :src="imagePath + 'rule.png'" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="goLink">
			<image :src="imagePath + 'link.png'" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-4" @click="phone">
			<image :src="imagePath + 'tel.png'" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<confim v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler" @cancel="isShowAgreementConfirm = false" @showAgreement="showAgreementHandler"></confim>
		<!-- 成功展示页面 -->
		<uni-popup ref="successRef" type="bottom" background-color="#fff" border-radius="10px 10px 10rpx 10rpx">
			<jxwSuccessShop :mobile="userInfo.mobile" @btnOk="JxwSuccessShopClose"></jxwSuccessShop>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import paramApi from '@/apis/paramApi.js';
import perInfoVue from '../../components/per-info/per-info.vue';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds, getPhoneNumber, handleAuthError } from '@/utils/login.js';
import { getProductNum } from '@/utils/commo.js';
const { userInfo } = storeToRefs(useUserStore());
const imagePath = ref('https://web.78keji.cn/v2img/jxw/');
const { constInfo } = constStore();
const uuIdsInit = uuIds();
const accountForm = ref();
const successRef = ref();
// 表单数据
const isShowAgreementConfirm = ref(false);
const allChecked = ref(false);
const popupOk = ref();
const agree = ref('同意');
const agreeType = ref(1);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});

const dialogRef=()=>{
		successRef.value.open('center');
}
const JxwSuccessShopClose=()=>{
		successRef.value.close();
}
// 获取手机号 并下单
const getPhoneNumberConfirm = async () => {
	const res = await getPhoneNumber();
	console.log(res, 'getPhoneNumberConfirm');
	if (res.code == 20000) {
		submitform();
	}
};
const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};
const goLink = () => {
	// console.log('去哪里');
	uni.navigateTo({
		url: `/pages/my/orderList`
	});
};
watch(
	() => formData.mobile,
	(newVal, oldValue) => {
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
		if (isOkMobile) {
			uni.hideKeyboard();
		}
	}
);


// 调用函数检查环境

const agreementConfirmOkHandler = () => {
	allChecked.value = true;
	submitform();
};
/* 发送订单 */
const submitform = async () => {
	console.log(userInfo.value);

	try {
		if (!allChecked.value) return (isShowAgreementConfirm.value = true);
		if (!userInfo.value.info.mobile) return uni.utils.toast('请输入手机号');

		const arr = {
			productCode: 'LH2524',
			channelCode: paramApi.getA(),
			mobile: userInfo.value.info.mobile,
			orderType: 3,
			paymentMethod: 1,
			
			param: paramApi.getParam(),
			uuid: uuIdsInit,
			environmentCode: "9",
			scenarioCode: "7"
		};

		initApi.associateMemberSign(arr).then((res) => {
			console.log(res, 'uuiduuid');
			if (res.code == 20000) {
				handleJumpPaySign(res.data);
			} else {
				uni.utils.toast(res.message);
			}
		});

	
	} catch (e) {
		//TODO handle the exception
		console.log(e);
	
		return uni.utils.toast('订单订购失败');
	}
};
const handleJumpPaySign = (query) => {
	console.log(query, 'apply');
	my.ap.openURL({
		url: 'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl, // 请将 url 替换为有效的页面地址
		success: (res) => {
			console.log('openURL success', res);
		},
		fail: (err) => {
			console.log('openURL success', err);
		}
	});
	// my.paySignCenter({
	// 	signStr: 'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl,
	// 	success: (paySignCenterRes) => {
	// 		/* 
	// 		7000	协议签约成功 
	// 		7001 签约结果未知（有可能已经签约成功）。
	// 		7002 协议签约失败。
	// 		6001 用户中途取消
	// 		6002 网络连接错误。
	// 		 */
	// 		console.log('zhouqiPayHandler success ' + JSON.stringify(paySignCenterRes));
	// 		console.log(paySignCenterRes.resultStatus);
	// 		if (paySignCenterRes.resultStatus && parseInt(paySignCenterRes.resultStatus) == 6001) {
	// 			// messageUtil.closeLoading();
	// 			// messageUtil.showFail('支付失败');
	// 			// this.props.onGoToPay('支付失败');
	// 			return uni.utils.toast('用户中途取消');
	// 		} else if (paySignCenterRes.resultStatus && parseInt(paySignCenterRes.resultStatus) == 6002) {
	// 			// this.props.onGoToPay('成功');
	// 			return uni.utils.toast('网络连接错误');
	// 		} else if (paySignCenterRes.resultStatus && parseInt(paySignCenterRes.resultStatus) == 7000) {
	// 			dialogRef()
	// 			return uni.utils.toast('协议签约成功 ');
	// 		} else if (paySignCenterRes.resultStatus && parseInt(paySignCenterRes.resultStatus) == 7001) {
	// 			return uni.utils.toast('协议签约失败 ');
	// 		} else if (paySignCenterRes.resultStatus && parseInt(paySignCenterRes.resultStatus) == 7002) {
	// 			return uni.utils.toast('协议签约失败 ');
	// 		}
	// 	},
	// 	fail: (paySignCenterResErr) => {
	// 		console.log('zhouqiPayHandler fail ' + JSON.stringify(paySignCenterResErr));
	// 		// this.props.onGoToPay('支付失败');
	// 		uni.utils.toast('签约拉起失败');
	// 		// logApi.addKeepLog('龙宝卡拉起周期扣款失败：' + JSON.stringify(paySignCenterResErr));
	// 	}
	// });

};
onLoad(async (query) => {
	paramApi.initData(query);
	// 支付宝 默认授权登录
	// #ifdef MP-ALIPAY
	// await getALPhoneNumber();
	// getPhoneNumber();
	// #endif
	setTimeout(() => {
		getProductNum(paramApi.getA(), 'LH2524', uuIdsInit);
	}, 100);
});

/* 统计 */

const ok1 = () => {
	popupOk.value.close();
	allChecked.value = true;
};
const showAgreementHandler = (value) => {
	console.log(value);
	agreeType.value = value;
	popupOk.value.open('center');
};
const privatePro = (type) => {
	agreeType.value = type;
	popupOk.value.open('center');
};
</script>

<style lang="scss" scoped>
.form-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	overflow: hidden;
	box-sizing: border-box;

	.forms-item {
		width: 600rpx;
		margin: 0 auto;
	}
	.login-btn-auth {
	}
	.login-btn {
		animation: scaleUp 2.5s infinite;
		/* 动画名称、持续时间、是否无限循环 */
	}

	@keyframes scaleUp {
		0%,
		50% {
			transform: scale(1);
			/* 开始时的缩放比例 */
		}

		25%,
		75% {
			transform: scale(1.05);
			/* 缩放比例最大值 */
		}

		100% {
			transform: scale(1);
			/* 结束时的缩放比例 */
		}
	}

	.uni-forms-item {
		height: 100rpx;
		margin-bottom: 20 !important;
		border-bottom: 2rpx solid #eee;

		/* #ifndef MP-ALIPAY */
		background-color: #ffffff;
		/* #endif */
		border-radius: 100rpx !important;
		box-sizing: border-box;

		.uni-input-input {
			width: 600rpx;
			/* #ifdef MP-ALIPAY */
			height: 100rpx;
			margin-left: 75rpx;
			text-align: center;
			font-size: 34rpx;
			/* #endif */

			/* #ifndef MP-ALIPAY */
			margin-left: 50rpx !important;
			/* #endif */
			font-size: 34rpx;
		}
	}
}

.lh-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	min-height: 100vh;
}

:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}

.fixed-phone {
	position: absolute;
	top: 300rpx;
	right: 0rpx;
}

.fixed-active {
	position: absolute;
	top: 150rpx;
	right: 0rpx;
}

.fixed-link {
	position: absolute;
	top: 450rpx;
	right: 0rpx;
}

.arrive-btn {
	position: fixed;
	bottom: 20rpx;
	width: 750rpx;
	text-align: center;
}

.sub-btn {
	background: none;
	padding: 0;
	margin: 0;
	border: none;
	animation: scaleUp 2.5s infinite;
	box-shadow: none;
	border-style: none;
	margin-top: 25rpx;
	min-height: 120rpx;
	border::after {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		content: none;
		border-style: none;
	}
}

.bottom {
	margin-top: 20rpx;
	text-align: center;
	font-size: 20rpx;
	color: #ffffff;
}

:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
</style>
